import { useEffect, useState } from 'react';
import { Typography } from 'antd';
import { GithubOutlined, ReadOutlined,BilibiliOutlined,CloudDownloadOutlined,MessageOutlined } from '@ant-design/icons';
import '../../assets/css/home.css';
import ParticlesBackground from "@/components/threeJS/ParticlesBackground";


const { Title } = Typography;

/**
 * 首页展示组件 - 包含动态标题、社交链接和主要操作入口
 * 功能特性：
 * 1. 自动轮播展示个人身份标签（前端开发者/Blogger/GISer）
 * 2. 响应式布局适配不同屏幕尺寸
 * 3. 提供博客和GitHub快速访问入口
 * 4. 包含联系方式和简历下载功能
 */
const Home = () => {
  // 动态标题文本状态管理
  const [titleText, setTitleText] = useState('Jing Liu');

  useEffect(() => {
    // 身份标签轮播配置
    const titles = [
      'Jing Liu',
      'A Frontend Developer',
      'A Blogger',
      'A GISer'
    ];
    let currentIndex = 0;

    // 定时器实现标题切换机制
    const interval = setInterval(() => {
      // 循环遍历标题数组
      currentIndex = (currentIndex + 1) % titles.length;
      setTitleText(titles[currentIndex]); // 更新状态触发重新渲染
    }, 2500);

    // 组件卸载时清除定时器
    return () => clearInterval(interval);
  }, []);

  return (
    <section 
      id="home" 
      className="home-section">
      {/* 响应式布局容器 - 通过Tailwind的inner-width类实现最大宽度限制 */}
      <div className="home-container">
      <ParticlesBackground />
        <div className="home-content">
          {/* 动态标题展示区域 */}
          <Title level={1} className="home-title">
            Hi I'm {titleText}
          </Title>

          {/* 社交链接区域 */}
          <div className="social-links">
            {/* 博客链接 - 点击跳转CSDN博客 */}
            <a 
              href="https://gisjing.blog.csdn.net/ " 
              target="_blank" 
              rel="noopener noreferrer" 
              className="social-link">
              <ReadOutlined style={{color: '#000000'}} />
            </a>
            
            {/* GitHub链接 - 点击跳转GitHub主页 */}
            <a 
              href="https://gitee.com/gisjinger " 
              target="_blank" 
              rel="noopener noreferrer" 
              className="social-link">
              <GithubOutlined style={{color: '#000000'}} />
            </a>

                 
            {/* GitHub链接 - 点击跳转GitHub主页 */}
            <a 
              href="https://gitee.com/gisjinger " 
              target="_blank" 
              rel="noopener noreferrer" 
              className="social-link">
              <BilibiliOutlined style={{color: '#000000'}} />
            </a>
          </div>

          {/* 操作按钮组 */}
          <div className="action-buttons">
            {/* 联系按钮 - 平滑滚动到联系方式区块 */}
            <a 
              href="#contact" 
              className="contact-button">
              <MessageOutlined style={{color: '#000000'}} />  
              联系我
            </a>
            
            {/* 简历下载按钮 - 主操作按钮样式强调 */}
            <a 
              href="#" 
              className="resume-button">
              <CloudDownloadOutlined style={{color: '#ffffff'}} />
              下载简历
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Home;